<template>
  <view class="p-coupon-goods">
    <view class="list" v-for="(item,index) in list" :key="index" @click="onDetail(item)">
      <view class="lf flex1">
        <view class="content">
          <view class="_img">
            <x-image v-if="item.productBrand" class="tag" src="/assets/images/tag-brand.png"/>
            <x-image :src="item.productMainPic"/>
          </view>

          <view class="goods-info">
            <view class="top">
              <view class="_title line-clamp-1">{{ item.productTitle }}</view>
              <view class="tags">
                <view class="tags__item" v-for="(tag,index) in item.tagList" :key="index">{{tag}}</view>
              </view>
            </view>

            <view class="_goods">
              <view class="flex1">
                <view class="_tip">
                  <text>全网低价</text>
                  <text class="text-delete">¥{{ item.productPrice }}</text>
                </view>
              </view>
              <view class="_price" >
                <template v-if="item.postCouponPrice">
                  券后价 ¥<text style="font-size: 18px;">{{ item.postCouponPrice.toFixed(2) }}</text>
                </template>
                <template v-else>
                  ¥<text style="font-size: 18px;">{{ item.subsidyPrice ? item.subsidyPrice.toFixed(2) : item.productPrice.toFixed(2) }}</text>
                </template>
              </view>
            </view>
          </view>
        </view>

        <view class="progress">
          <view class="progress__bar">
            <view class="progress__bar-inner" :style="{width: `${item.process}%`}"></view>
          </view>
          <view class="progress__text">券已领{{ item.process }}%</view>
        </view>
      </view>

      <view class="rt">
        <view>¥<text class="_price">{{ item.couponAmount }}</text></view>
        <view class="type">
          <template v-if="item.couponType === 2">无门槛券</template>
          <template v-else>满{{item.transactionAmount.toFixed(2)}}元可用</template>
        </view>
        <view class="_btn">
          立即使用
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';

export default {
  name: 'XCouponGoods',
  components: {
    XImage
  },
  props: {
    list: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      payEndTime: '2021-08-17'
    };
  },
  computed: {},
  created() {

  },
  mounted() {

  },
  onLoad(query) {
    this.query = query;
  },
  watch: {},
  // 滚动页面
  onPageScroll(e) {

  },
  /**
   * 下拉刷新
   * */
  onPullDownRefresh() {
  },
  // 页面触底加载数据
  onReachBottom() {
  },
  // 分享转发
  onShareAppMessage() {
    // return {
    //   path: '/pages/index/index'
    // };
  },
  methods: {
    onDetail(item) {
      uni.navigateTo({
        url: `/pages/transit-product/index?productId=${item.productId}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.p-coupon-goods{
  .list{
    display: flex;
    min-height: 260px;
    border-radius: 6px;
    background: #FFFFFF;
    margin-bottom: 16px;
    overflow: hidden;
    .lf{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      border-right: 2px dashed #EBEDF0;
      padding: 24px 0 24px 16px;

      .content{
        display: flex;

        ._img{
          flex: none;
          width: 170px;
          height: 170px;
          border-radius: 6px;
          background: #FFE4E4;
          margin-right: 16px;
          position: relative;
          overflow: hidden;

          .tag{
            position: absolute;
            top: 0;
            left: 0;
            width: 64px;
            height: 34px;
          }
        }

        .goods-info{
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          ._title{
            color: #000000;
            font-size: 28px;
            font-weight: bold;
          }

          ._goods{
            margin-right: 40px;
            ._tip{
              font-size: 24px;
              color: #999999;
            }
            ._price{
              margin-top: 10px;
              font-weight: bold;
              font-size: 24px;
              line-height: 26px;
              color: $uni-color-primary;
              display: flex;
              align-items: baseline;
            }
          }
        }
      }
    }

    .rt{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 200px;
      color: #DE3A2E;
      font-size: 24px;
      ._price{
        font-weight: bold;
        font-size: 50px;
      }
      .type{
        margin-top: 5px;
      }
      ._btn{
        margin-top: 40px;
        width: 140px;
        height: 44px;
        font-size: 24px;
        line-height: 44px;
        text-align: center;
        color: #FFFFFF;
        background: #DE3A2E;
        border-radius: 6px;
      }
    }
  }
}

.tags{
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  &__item{
    padding: 0 8px;
    border: 1px solid #FCBF9D;
    box-sizing: border-box;
    border-radius: 4px;
    color: #E97E51;
    font-size: 22px;
    margin: 0 13px 13px 0;
  }
}

.progress{
  display: flex;
  align-items: center;
  margin-left: 6px;
  &__bar{
    flex: 1;
    height: 14px;
    background: linear-gradient(90deg, #FF5D51 0%, #FFE2E0 100%);
    border-radius: 2px;

    &-inner{
      position: relative;
      width: 50%;
      height: 100%;
      background: repeating-linear-gradient(135deg, rgba(255,255,255, 0.15), rgba(255,255,255, 0.15) 8px, transparent 8px, transparent 16px);
      border-radius: 2px;
      animation: process 3s linear infinite;

      &:after{
        content: '';
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background: cdn('/images/icon-process.png') center no-repeat;
        background-size: contain;
      }
    }
  }

  &__text{
    width: 140px;
    text-align: center;
    color: #999999;
    font-size: 22px;
  }
}

.text-delete{
  text-decoration: line-through;
}

@keyframes process {
  form{
    background-position-x: 0;
  }

  to{
    background-position-x: 300px;
  }
}
</style>
